<template>
	<view>
		<custom-nav></custom-nav>
		<swiper indicator-dots >
			<swiper-item>
				<image class="banner" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/0f15c6f3a68d9635/8073b8a1275808bf.jpg" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image class="banner" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/cc08fc166fda6084/c1ecc46bc3382eea.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- #ifdef MP-WEIXIN -->
		<view class="flex justify-around padding">
			<view class="padding" v-for="item in 4">
				这是宫格
			</view>
		</view>
		<!-- #endif -->
		
		<HomeTitle :is-more="false"/>
		<scroll-view scroll-x >
			<view class="flex">
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/b9d378e1be959376/d943a30b6ebdaa1a.jpg" mode="heightFix"></image>
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/a0de523d9c386a89/b387a82b971c54f6.jpg" mode="heightFix"></image>
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/48632be97e13ccb2/a4e45a70e20999c0.jpg" mode="heightFix"></image>
			</view>
		</scroll-view>
		<HomeTitle title="法式经典" en-tit="French Classic"/>
		<image class="poster" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/abd8fe9087c3ea1a/4d496694b1f9ca15.jpg" mode="widthFix"></image>
		<view class="flex flex-wrap padding-sm justify-between">
			<goods-item v-for="item in cakeList" :good-data="item"/>
		</view>
	</view>
</template>

<script>
	import { cakeGet } from '../../api/cake';
import HomeTitle from '../../components/home-title.vue'
	export default {
		components:{
			HomeTitle
		},
		data() {
			return {
				cakeList:[]
			};
		},
		async onLoad() {
			let res = await cakeGet()
			this.cakeList = res.data.results
		},
	}
</script>

<style lang="scss">
swiper,swiper-item,.banner{
	height: 800upx;
	width: 100%;
}
scroll-view{
	image{
		height: 290upx;
		flex-shrink: 0;
	}
}
.poster{
	width: 100%;
}
page{
	padding-top: 100upx;
}
</style>
